<template>
	<view class="center">
		<view class="center2">
			<view class="address">
				<text >收货人</text>
				<input placeholder="收货人" v-model="addressInfo.addressContactName"/>
			</view>
			<view class="address">
				<text>手机号码</text>
				<input maxlength="11" placeholder="手机号码" v-model="addressInfo.addressContactTel"/>
			</view>
			<view class="address">
				<text>所在省会</text>
				<input  placeholder="所在省会" v-model="addressInfo.addressProvince"/>
			</view>
			<view class="address">
				<text>所在城市</text>
				<input  placeholder="所在城市" v-model="addressInfo.addressCity"/>
			</view>
			<view class="address">
				<text>所在地区</text>
				<input  placeholder="所在地区" v-model="addressInfo.addressDistrict"/>
			</view>
			<view class="address">
				<text>所在街道</text>
				<input  placeholder="所在街道" v-model="addressInfo.addressStreet"/>
			</view>
			<view class="address1">
				<text>详情地址</text>
				<input  placeholder="如道路、门牌、小区、楼栋号、单元室等" v-model="addressInfo.addressDetail"/>
			</view>
			<view class="address1">
				<text>邮编</text>
				<input  placeholder="所在地区邮编" v-model="addressInfo.addressZip"/>
			</view>
		</view>
		<view class="fillIn">
			<view>智能填写</view>
			<image src="https://z3.ax1x.com/2021/04/10/cdIlNQ.png"></image>
		</view>
		<view class="foot">
			<view class="label"> 
				<view>地址标签</view>
				<view>
					<text>学校</text>
					<text>公司</text>
					<text>家</text>
				</view>
				<view>
					<text>更多</text>
					<image src="https://z3.ax1x.com/2021/04/09/cUYpp6.png"></image>
				</view>
			</view>
			
			<view class="save" @click="addAddress">
				<text>保存</text>
			</view>
			
		</view>
		
		
	</view>
</template>

<script>
	import {createNamespacedHelpers} from "vuex"
	let {mapActions}=createNamespacedHelpers("mine")
	export default {
		data() {
			return {
				addressInfo:{
					//收货人
					addressContactName:"",
					//收货电话
					addressContactTel:"",
					//收货省会
					addressProvince:"",
					//收货城市
					addressCity:"",
					//收货地区
					addressDistrict:"",
					//收货街道
					addressStreet:"",
					//收货地址详情
					addressDetail:"",
					//邮编
					addressZip:"",
					isDefaultAddress:0
				}
			};
		},
		methods:{
			...mapActions(["addAddressInfo"]),
			async addAddress(){
				let {addressContactName,
				addressContactTel,
				addressProvince,
				addressCity,
				addressDistrict,
				addressDetail,
				addressZip}=this.addressInfo
				
				if(addressContactName!=""&&
				addressContactTel!=""&&
				addressProvince!=""&&
				addressCity!=""&&
				addressDistrict!=""&&
				addressDetail!=""&&
				addressZip!=""
				){
					console.log(111,this.addressInfo)
					let data = await this.addAddressInfo({...this.addressInfo});
					if(data.code==1350){
						uni.showToast({
							title:"新增地址成功"
						})
						uni.redirectTo({
							url:"../../mine/mineAddress/mineAddress"
						})
					}
				}
				else{
					uni.showToast({
						title:"请将地址填写完整！",
						icon:"none"
					})
					// uni.showModal({
					// 	title:"",
					// 	content:"请将地址填写完整！"
					// })
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.center{
		box-sizing: border-box;
		padding: 10rpx;
		height: 100%;
		width: 100vw;
		background-color: #F1F1F1;
		.center2{
			padding: 18rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			.address{
				width: 100%;
				display: flex;
				padding: 18rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #dfdfdf;
				text{
					width: 20%;
					display: block;
					margin-right: 40rpx;
					font-size: 30rpx;
				}
				input{
					// border: 1rpx solid red;
					width: 75%;
					font-size: 26rpx;
				}
			}
			.address1{
				width: 100%;
				display: flex;
				box-sizing: border-box;
				padding: 18rpx;
				border-bottom: 1rpx solid #dfdfdf;
				text{
					margin-top: 30rpx;
					width: 20%;
					display: block;
					// border: 1rpx solid red;
					margin-right: 40rpx;
					font-size: 30rpx;
				}
				input{
					vertical-align: top;
					line-height: 1;
					// border: 1rpx solid red;
					width: 75%;
					height: 100rpx;
					font-size: 26rpx;
				}
			}
		}
		.fillIn{
			padding: 18rpx;
			margin-top: 10rpx;
			margin-bottom: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.fillIn{
				font-size: 30rpx;
			}
			image{
				width: 30rpx;
				height: 20rpx;
			}
		}
		.foot{
			height: 1000rpx;
			padding: 18rpx;
			background-color: #FFFFFF;
			.label{
				display: flex;
				height: 80rpx;
				line-height: 80rpx;
				justify-content: space-between;
				border-bottom: 1rpx solid #dfdfdf;
				view{
					&:nth-of-type(1){
						width: 30%;
					}
					&:nth-of-type(2){
						display: flex;
						align-items: center;
						text-align: center;
						text{
							margin-right: 20rpx;
							font-size: 24rpx;
							color:#999999;
							border-radius: 30rpx;
							line-height: 60rpx;
							display: inline-block;
							width: 100rpx;
							height: 60rpx;
							border: 1rpx solid #999999;
						}
					}
					&:nth-of-type(3){
						text{
							font-size: 28 rpx;
							color: #b2b1b5;
							margin-right: 15rpx;
						}
						image{
							width: 18rpx;
							height:20rpx;
						}
							
					}
				}
			}
			.save{
				margin-top: 100rpx;
				display: flex;
				align-items: center;
				text-align: center;
				text{
					margin-right: 20rpx;
					font-size: 24rpx;
					color:#ffffff;
					border-radius: 30rpx;
					line-height: 60rpx;
					display: inline-block;
					width: 100%;
					height: 60rpx;
					background:linear-gradient(90deg,#ff7c3a 0%,#ff7d31 30%,#ff7214 51%,#ff460e 100%);
				}
			}
		}
		
	}
</style>
